<template>
  <!-- 封装Icon组件 -->
  <div class="icon-container" @click="$emit('click', $event)">
    <i :class="['iconfont', 'icon-' + name]" :style="{ fontSize: size + 'px', color: color }"></i>
    <!-- 徽标：当 dot 为 true 时显示小红点，当 count 存在时显示数字（即使是0） -->
    <div v-if="dot || count !== undefined" class="icon-dot" :class="{ 'has-count': count !== undefined }">
      {{ count !== undefined ? count : '' }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    default: ''
  },
  // 大小 颜色
  size: {
    type: [Number, String],
    default: 24
  },
  color: {
    type: String,
    default: 'black'
  },
  dot: {
    type: Boolean,
    default: false
  },
  count: {
    type: [Number, String],
    default: undefined
  }
})
</script>

<style lang="scss" scoped>
// 1.导入iconfont.css
@import '@/assets/Icon/iconfont.css';

.icon-container {
  position: relative;
  display: flex;

  .icon-dot {
    position: absolute;
    top: 6px;
    right: 0;

    // 默认状态：纯小红点（6x6）
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 6px;
    padding: 0;
    box-sizing: border-box;
    transform: translate(50%, -50%);
    overflow: hidden;
  }

  // 显示数字时：变为椭圆气泡
  .icon-dot.has-count {
    right: 2px;
    top: 6px;
    width: auto; // 自动宽度
    min-width: 12px; // 最小保持能放下一位数
    height: 14px; // 合理高度，不要太扁
    line-height: 14px; // 垂直居中文字
    padding: 0 4px; // 左右留白
    border-radius: 8px; // 圆角矩形（接近椭圆）
    font-size: 10px; // 清晰可读
    background-color: red;
    color: #fff;
    text-align: center;
  }
}
</style>